<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-primary bg-opacity-10">
<div class="container-fluid" style="padding-top: 60px">
    <div class="row " style="height: 550px">
        <div class="col "></div>
        <div class="col d-flex flex-row align-items-center">
            <div class=" w-75 bg-white mx-auto border-dark-subtle border" style="border-radius:20px"><!--中间列-->
                <div class=" border-bottom border-dark-subtle position-relative" style="height: 110px">
                    <div class="text-center pt-4 fs-3">极致美化</div>
                    <div class="w-50 text-center text-black-50 bg-white position-absolute top-100 start-50 translate-middle ">登录即可打开新世界大门</div>
                </div>
                <!--  表单-->
                <div class="pt-4" style="height: 480px">
                    <p class="text-center table-light text-black-50">注册</p>
                    <form class="px-4 " name="form1" id="form1" action="" method="post">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control bg-transparent" id="username" name="username" placeholder="">
                            <label for="username">登录用户名</label>
                            <div id="usernameHelp" class="form-text">4-8位字母数字组成</div>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="password" class="form-control bg-transparent" id="password" name="password" placeholder="">
                            <label for="password">密码</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="name" class="form-control bg-transparent" id="nick" name="nick" placeholder="">
                            <label for="nick">昵称</label>
                        </div>
                        <div class="d-flex flex-row justify-content-between mb-3" style="font-size: 0.8em">
                            <a href="" class="text-decoration-none text-success">忘记密码</a>
                            <a href="login.html" class="text-decoration-none text-success">已有账号？登录</a>
                        </div>
                        <div class="d-grid mb-3">
                            <button type="button" id="submitBtn" class="btn btn-success" style="font-size: 0.9em">注册</button>
                        </div>
                        <div class="p-3 rounded text-center bg-opacity-50 bg-light" style="font-size: 0.8em">
                            <span>注册登录即表示同意<a href="" data-bs-toggle="modal" data-bs-target="#policy">用户协议和隐私政策</a></span>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="policy" tabindex="-1" aria-labelledby="policyLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="policyLabel">用户协议和隐私政策</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <p>我们非常重视保护用户的隐私权，请您在浏览本网站以及使用本网站的特定服务之前，仔细阅读本隐私权声明。使用本网站，即视为您同意本隐私权声明并同意本网站根据本隐私权声明收集、使用、披露您的个人信息。本隐私权声明主要包括如下内容：当您浏览本网站时，我们向您收集哪些信息；我们如何使用这些信息；我们会在何种情况下披露这些信息；以及您的选择。</p>
                                        <p>本隐私权声明适用于本网站收集的关于您的个人信息。请注意本网站可能包含连接到其他网站的链接，我们对这些其他网站的隐私权做法不承担任何责任。我们建议您仔细阅读您所浏览的其他网站的隐私权声明。</p>
                                        <p>01.信息的收集</p>
                                        <p>您向我们提供的信息。 如果您仅仅浏览本网站的一般性内容，我们并不要求您提供任何个人信息。在您需要使用或浏览我们提供的特定服务或信息时（比如参加讨论或直接联系本网站），在您的同意及确认下，我们可能会以线上或线下注册表格的形式要求您提供如下个人资料和信息：</p>
                                        <p>• 具体信息，比如姓名，出生日期，电子邮箱，电话号码，手机号码，通讯地址等；</p>
                                        <p>• 一般性信息，比如您的性别，年龄，职业，教育，收入状况，婚姻家庭状况，兴趣爱好等；</p>
                                        <p>• 仅在特定情况下（比如您需要成为签约作者），我们会要求您提供个人付款信息和身份证件信息，比如银行卡号码或支付宝账号。</p>
                                        <p>我们自动收集的信息。 当您浏览本网站时（不管是否注册或登录），本网站可能自动收集与您相关的如下信息：</p>
                                        <p>• 您的浏览器类型和浏览器语言、操作系统类型、宽带类型；</p>
                                        <p>• 您的IP地址，该地址有时可以显示您所在地理位置；</p>
                                        <p>• 您在本网站内浏览过的页面和链接；</p>
                                        <p>• 您访问本网站时发出的访问请求及其日期、时间和引荐网址（如有）；</p>
                                        <p>• 通过Cookie标注您的浏览器的唯一性和在本网站的账户信息（包括您访问本网站的各项活动，浏览习惯，消费习惯，账户信息等）；您可以通过修改浏览器设置的方式拒绝cookie，如果您拒绝cookie，您可能无法使用依赖于cookie才能提供的本网站服务或功能；</p>
                                        <p>• 我们可能会使用浏览器网络存储（包括HTML5）和应用程序数据缓存等机制，在您的设备上收集和存储您所浏览过的网页信息；</p>
                                        <p>• 当您使用本网站提供的具有定位功能的服务时，我们可能会收集并处理有关您实际所在位置的信息（例如移动设备发送的GPS信号），我们还可能使用各种技术进行定位，例如来自您设备的传感器数据就可以提供附近Wi-Fi接入点和移动运营商基站的信息。</p>
                                        <p>请注意，本隐私权声明不适用于任何向您提供服务的第三方主体，包括那些可能向本网站披露信息的第三方。</p>
                                        <p>如果您需要查询、更正您的个人信息或注销账号，请通过mf151@vip.qq.com与我们联系并提供您的账号和其他验证信息，我们在核实后会回复您的请求。</p>
                                        <p>02.信息的使用</p>
                                        <p>...</p>




                                    </div>
                                    <div class="modal-footer">
                                        <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
                                        <label class="btn btn-outline-success" for="success-outlined">接受</label>

                                        <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off" >
                                        <label class="btn btn-outline-danger" for="danger-outlined">拒绝</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span class="text-danger" style="font-size: 0.9em"></span>
                    </form>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="img/logo.png" width="81px" class="rounded me-2" alt="...">
            <strong class="me-auto">极致美化-资源</strong>
            <small>警告</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            有未通过验证的数据  无法提交注册
        </div>
    </div>
</div>

<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.7.1-min.js"></script>
<script>
    function chkUsername() {
        let username = $("#username").val();
        if(username == null||username.length == 0){
            $("#usernameHelp").attr("class","text-danger").text("必须填");
            return false;
        }else {
            let reg = /^[a-z0-9]{4,8}$/i;
            if(reg.test(username)){
                let bool = true;
                $("#usernameHelp").attr("class","text-success").text("格式正确");
                $.ajax({
                    url:'${pageContext.request.contextPath}/find',
                    type:'post',
                    async:true,
                    data:{"username":username},
                    dataType:'text',
                    success:function (back) {
                        if(back=='1'){
                            $("#usernameHelp").attr("class","text-danger").text("已存在不可用");
                            bool=false;
                        } else {
                            $("#usernameHelp").attr("class","text-success").text("可用");
                        }
                    }
                })
                return bool;
            }else {
                $("#usernameHelp").removeClass("text-success").addClass("text-danger").text("不符合4-8位数字");
                return false;
            }
        }
    }
    $("#username").blur(function () {
        chkUsername();
    })
    $("#submitBtn").click(function () {
        if (chkUsername()){
            $("#form1").submit();
        } else {
            const toast = new bootstrap.Toast(document.getElementById("liveToast"));
            toast.show();
        }
    })


</script>
</body>
</html>